<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <!--        <style>-->
    <!--            .el-header a {-->
    <!--                color: #666;-->
    <!--                text-decoration: none;-->
    <!--            }-->

    <!--            .el-menu.el-menu&#45;&#45;horizontal {-->
    <!--                border-bottom: 0;-->
    <!--            }-->

    <!--            .el-table .el-table__cell {-->
    <!--                padding: 0;-->
    <!--            }-->
    <!--        </style>-->
  </head>
  <body>
    <div id="app">
      <el-container>
        <el-header height="150px">

          <div style="background-color: #0aa1ed">
            <el-menu style="width: 1200px;margin: 0 auto" mode="horizontal" background-color="#0aa1ed"
                     text-color="#fff" active-text-color="#fff">
              <el-menu-item index="1">订单</el-menu-item>
              <el-menu-item index="2">购物车</el-menu-item>
              <el-menu-item index="3">优惠劵</el-menu-item>
              <el-menu-item index="4">基本信息</el-menu-item>
              <el-menu-item index="5">我的收藏</el-menu-item>
              <el-menu-item index="6">我的食物</el-menu-item>
              <el-menu-item index="7">薄荷花田</el-menu-item>
              <el-menu-item index="8">智能设备</el-menu-item>
              <div style="float: right;position: relative;top: 10px">
                <el-input type="text">
                  <!--在文本框中内嵌一个搜索按钮-->
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>

              </div>
              <template>
                <div class="demo-type"
                     style="position: absolute;top:10px;right:-70px"
                >
                  <div>
                    <el-avatar icon="el-icon-user-solid"></el-avatar>
                  </div>

                </div>
              </template>
            </el-menu>
          </div>
          <!--导航菜单结束-->
        </el-header>
        <!--                <el-main style="width: 1200px;margin: 0 auto">-->
        <!--                <div class="line"></div>-->

        <!--                            <h1 style="float: left">侧边栏菜单</h1>-->
        <div style="width:500px;height: 340px ;background-color: #e8e8e8;
                                        position: absolute;top:68px;left: 28px">
          <el-menu style="padding: 0 0 ;float: left;position: relative;background-color: #0aa1ed">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-search"></i>健康方案</template>
              <el-menu-item index="1-1">吃1</el-menu-item>
              <el-menu-item index="1-2">吃2</el-menu-item>
              <el-menu-item index="1-3">吃3</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title"><i class="el-icon-edit"></i>饮食方案</template>
              <el-menu-item index="2-1">喝1</el-menu-item>
              <el-menu-item index="2-2">喝2</el-menu-item>
              <el-menu-item index="2-3">喝3</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title"><i class="el-icon-delete"></i>本周食谱</template>
              <el-menu-item index="3-1">菜1</el-menu-item>
              <el-menu-item index="3-2">菜2</el-menu-item>
              <el-menu-item index="3-3">菜3</el-menu-item>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title"><i class="el-icon-delete"></i>数据统计</template>
              <el-menu-item index="4-1">数1</el-menu-item>
              <el-menu-item index="4-2">数2</el-menu-item>
              <el-menu-item index="4-3">数3</el-menu-item>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title"><i class="el-icon-delete"></i>上周小结</template>
              <el-menu-item index="5-1">结论1</el-menu-item>
              <el-menu-item index="5-2">结论2</el-menu-item>
              <el-menu-item index="5-3">结论3</el-menu-item>
            </el-submenu>
            <el-submenu index="6">
              <template slot="title"><i class="el-icon-delete"></i>我的商品解决方案</template>
              <el-menu-item index="6-1">方案1</el-menu-item>
              <el-menu-item index="6-2">方案2</el-menu-item>
              <el-menu-item index="6-3">方案3</el-menu-item>
            </el-submenu>
          </el-menu>
        </div>



        <el-footer style="height: 40px">
          <div style="width: 1480px ;position: fixed ;bottom: 0; height: 10px;background-color: #282c30;color: #666;text-align: center;padding: 50px 0;">
            <p style="height: 10px">Copyright © 开心健康</p>

          </div>
        </el-footer>
        <!--                </el-main>-->
      </el-container>
    </div>
  </body>

  <!-- import Vue before Element -->
  <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
  <!-- import JavaScript -->
  <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
  <script>
    let v = new Vue({
      el: '#app',
      data: function () {
        return {}
      },
      methods: {}
    })
  </script>
</html>







